<template>
  <div>
    <div class="app-container">
      <!--tab-->
      <el-tabs v-model="tabs_name" class="u-m-b-20" @tab-click="handleTabClick">
        <el-tab-pane label="平台列表" name="0" />
        <el-tab-pane label="回收站" name="1" />
      </el-tabs>
      <!--平台头部-->
      <div class="addon-form cl">
        <el-form :inline="true" :model="searchData" class="z">
          <el-form-item>
            <el-select v-model="searchData.type" placeholder="平台类型">
              <el-option :key="0" label="全部" value="" />
              <el-option v-for="item in platformTypes" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-input v-model="searchData.name" clearable placeholder="输入平台名称" />
          </el-form-item>
          <el-form-item>
            <el-input v-model="searchData['username like']" clearable placeholder="输入用户昵称" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSearch">查询</el-button>
          </el-form-item>
        </el-form>
        <div class="work-button y">
          <el-button type="primary" @click="dialogChoosePlatformVisible = true">添加平台</el-button>
        </div>
      </div>
      <!--平台列表-->
      <el-table v-loading="loading" :data="dkTableData" style="width: 100%; min-height: calc(100vh - 350px)">
        <el-table-column label="平台ID" prop="plaid" width="80" />
        <el-table-column label="排序" prop="sort" width="80" />
        <el-table-column label="图标" align="center">
          <template #default="scope">
            <el-image :src="scope.row.logo || '@/assets/default/default.png'" alt="" style="width: 80px; height: 80px; border-radius: 10px">
              <template #error>
                <img src="@/assets/default/default.png" width="80px" alt="" />
              </template>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column label="名称">
          <template #default="scope">
            <div>
              <p>{{ scope.row.name }}</p>
              <p class="d-size-12 text-muted">类型：{{ scope.row.type_name }}</p>
            </div>
          </template>
        </el-table-column>
        <el-table-column v-if="!tabs_name" prop="status" label="状态">
          <template #default="scope">
            <el-switch
              v-model="scope.row.status"
              :active-value="1"
              :inactive-value="0"
              active-text="启用"
              inactive-text="停用"
              @change="changePlatformStatus(scope.row.plaid)"
            />
          </template>
        </el-table-column>
        <el-table-column prop="uid" label="所属用户" width="200" align="center">
          <template #default="scope">
            <dk-user-info
              style="cursor: pointer"
              :username="scope.row.user.username"
              :avatar="scope.row.user.avatar"
              @click="getUserForm(scope.row.plaid)"
            />
          </template>
        </el-table-column>
        <el-table-column v-if="tabs_name === '0'" label="操作" width="120">
          <template #default="scope">
            <el-button size="small" type="primary" @click="handlePlatformManage(scope.row.plaid, scope.row.type_mark)">操作台 </el-button>
          </template>
        </el-table-column>
        <el-table-column v-else label="操作" width="180">
          <template #default="scope">
            <el-button size="small" type="success" @click="handleRecoverPlatform(scope.row.plaid)">恢复</el-button>
            <el-button size="small" type="danger" @click="handleDestroyPlatform(scope.row.plaid)">清除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--平台列表结束-->
      <!--分页-->
      <el-pagination
        background
        layout="total,prev, pager, next"
        :total="total"
        :current-page="page"
        :page-size="pageSize"
        @current-change="currentChange"
      />
    </div>
    <el-dialog v-model:visible="dialogChoosePlatformVisible" title="添加平台">
      <div>
        <ul class="addPlatformList cl">
          <li v-for="(item, key) in platformTypes" :key="key" @click="handleAddPlatform(item.type)">
            <i :class="'iconfont ' + item.icon" />
            <p>{{ item.addText }}</p>
          </li>
        </ul>
      </div>
    </el-dialog>
    <dk-form-create-dialog ref="editForm" :form-data="formData" top="20vh" @submit="onSubmitUser" />
  </div>
</template>

<script>
import { changePlatformStatus, getPlatformList, editUserForm, destroyPlatform, recoveryPlatform } from '@/api/platform'
// import DkUserInfo from '@/components/HiDuoKe/DkShow/DkUser/DkUserInfo'
// import { addonUnInstall } from '@/api/addons'

export default {
  // components: { DkUserInfo },
  data() {
    return {
      page: 1,
      pageSize: 5,
      total: 0,
      dkTableData: [],
      searchData: {
        name: '',
        type: parseInt(this.$route.query.type) || ''
      },
      order: 'sort desc ,plaid desc',
      dialogFormVisible: false,
      dialogChoosePlatformVisible: false,
      fromData: null,
      tabs_name: '0',
      platformTypes: [
        { value: 1, label: '微信公众号', addText: '微信公众号', icon: 'icon-wechat', type: 'wechat' },
        { value: 2, label: '小程序集', addText: '小程序集', icon: 'icon-wxapp', type: 'app' },
        { value: 3, label: '企业微信', addText: '企业微信', icon: 'icon-work-wechat', type: 'work_wechat' },
        { value: 4, label: '抖音', addText: '抖音', icon: 'icon-douyin', type: 'douyin' },
        { value: 5, label: '自由平台', addText: '自由平台', icon: 'icon-free', type: 'free' }
      ],
      loading: true,
      formData: null
    }
  },
  mounted() {
    this.getList(this.page)
  },
  methods: {
    handleTabClick() {
      console.log(this.tabs_name)
      this.getList(1)
    },
    handleAddPlatform(type) {
      this.$router.push({ path: '/platform/' + type + '/add' })
    },
    handlePlatformManage(id, type) {
      this.$router.push({ path: '/' + type, query: { p: id } })
    },
    onSearch() {
      this.getList(1)
    },
    currentChange(page) {
      this.getList(page)
    },
    changePlatformStatus(id) {
      changePlatformStatus(id).then((res) => {
        this.$message.success(res.msg)
      })
    },
    getList(page) {
      this.dkTableData = []
      this.page = page
      getPlatformList(this.page, this.pageSize, this.searchData, this.order, this.tabs_name).then((res) => {
        this.dkTableData = res.data
        this.total = parseInt(res.msg)
        this.loading = false
      })
    },
    getUserForm(id) {
      if (this.tabs_name === '0') {
        editUserForm(id).then((res) => {
          this.formData = res.data
          this.$refs.editForm.dialogFormVisible = true
        })
      }
    },
    onSubmitUser() {
      this.getList(this.page)
    },
    // 恢复平台
    handleRecoverPlatform(plaid) {
      this.$confirm('此操作将恢复平台, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          recoveryPlatform(plaid).then((res) => {
            this.$message.success(res.msg)
            this.getList(this.page)
          })
        })
        .catch(() => {})
    },
    // 清除平台
    handleDestroyPlatform(plaid) {
      this.$prompt('此操作将永久删除该平台数据并通知所有应用,是否继续?', '提示', {
        inputPlaceholder: '请输入：确认删除',
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
        .then(({ value }) => {
          if (value === '确认删除') {
            destroyPlatform(plaid).then((res) => {
              this.$message.success(res.msg)
              this.getList(this.page)
            })
          } else {
            this.$message.info('输入的内容不对')
          }
        })
        .catch(() => {})
    }
  }
}
</script>
<style scoped lang="scss">
.addPlatformList {
  li {
    float: left;
    width: calc(50% - 20px);
    border: 1px solid #ccc;
    margin: 10px;
    padding: 20px;
    text-align: center;
    cursor: pointer;

    .iconfont {
      font-size: 32px;
    }

    p {
      padding: 10px;
    }

    &:hover {
      background: #f5f5f5;
      color: #409eff;
    }
  }
}
</style>
